<template>
	<view v-if="isLoaded">
		<li-report
			@openPopup="openPopup"
			height="400"
			:param.sync="param"
			:reportData="tableData"
			:columns="[
				{
					name: `name`,
					label: `结算方式`,
					fixed: true
				},
				{
					name: `value`,
					label: `笔数`,
					fixed: true,
					sorter: true
				},
				{
					name: `money`,
					label: `应收金额`,
					fixed: true,
					sorter: true
				},
				{
					name: `percentage`,
					label: `金额占比`,
					fixed: true,
					sorter: true
				}
			]"
		>
			<li-pie-chart v-show="!isShowCanvas" :cd="tableData" />
		</li-report>
	</view>
</template>

<script>
import date from '@/utils/date';
import LiReportMixin from '../../../mixins/liReportMixin.js';
import liStatisticsMixin from '../../../mixins/liStatisticsMixin';

export default {
	mixins: [LiReportMixin, liStatisticsMixin],
	data() {
		return {
			navTitle: '结算分析',
			reportFn: 'GetPageReport',
			param: {
				dataTimeRange: [date.getDate(0), date.getDate(0)],
				reportId: 114
			},
			opts: {
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 3,
						borderColor: '#FFFFFF'
					}
				}
			}
		};
	},
	methods: {}
};
</script>
